<template>
  <view class="invite-box">
    <div class="head">
      <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2bMYd.png" alt="">
      <div class="title">每邀请一个新用户领取会员权益，即可获得</div>
      <div class="reward">积分奖励</div>
      <div class="change">100积分起可兑换奖品</div>
      <div class="rules" @click="rulesShow">活动规则</div>
    </div>
    <div class="list">
      <div class="invite flex-a">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVy5nO.png" alt="">
        <text>热门礼品</text>
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6FCn.png" alt="">
      </div>
      <swiper :autoplay="true" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx"
        :interval="1000" :duration="8000" @change="swierChange">
        <swiper-item v-for="(item, index) in list" :key="index" class="swiperItem">
          <div :class="currentIndex === index ? 'slide-image active' : 'slide-image'">
            <div class="slide-head">
              <image :src="item.goodsCoverImg"></image>
            </div>
            <div class="slide-foot">
              <div>{{ item.goodsName }}</div>
              <div class="flex-a"><img src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2qsCd.png" alt=""><text>{{
                item.sellingPrice
              }}积分</text></div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div class="step">
      <div class="invite flex-a">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVy5nO.png" alt="">
        <text>邀请流程</text>
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6FCn.png" alt="">
      </div>
      <div class="flow flex-a flex-b">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6RaQ.png" alt="">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVcldg.png" alt="">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6hPs.png" alt="">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVcldg.png" alt="">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV64Gn.png" alt="">
      </div>
      <div class="tips flex-a flex-b">
        <div>
          <div>向好友</div>
          <div>发送邀请</div>
        </div>
        <div>
          <div>好友注册小程序</div>
          <div>并领取会员权益</div>
        </div>
        <div>
          <div>积分到账</div>
          <div>兑换奖品</div>
        </div>
      </div>
    </div>
    <div class="log">
      <div class="invite flex-a">
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVy5nO.png" alt="">
        <text>我的邀请记录</text>
        <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6FCn.png" alt="">
      </div>
      <div class="exchange flex-a">
        <div class="left">
          <div class="name">已领取:</div>
          <div class="num flex-a"><img src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2LOSA.png" alt=""><text>{{
            point.integralAct
            || 0
          }}</text></div>
        </div>
        <div class="middle">
          <div class="name">待兑换:</div>
          <div class="num flex-a"><img src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2LOSA.png" alt=""><text>{{
            point.integralMoney || 0 }}</text></div>
        </div>
        <div class="right">
          <div class="btn" @click="jumpTo">马上去兑换</div>
        </div>
      </div>
      <div :class="show ? 'users active' : 'users'">
        <div class="item flex-a" v-for="item in userList" :key="item">
          <div><img :src="item.introduceSign" alt=""></div>
          <div class="name">{{ item.nickName }}</div>
          <div class="integral"><img style="width: 40rpx;height: 40rpx;"
              src="https://cxj.szzkba.cn/up/uploadPath/icon/pP2qsCd.png" alt="">20积分</div>
        </div>
        <!-- <div class="noData">
          <nut-empty description="暂无记录，快去邀请好友吧！"></nut-empty>
        </div> -->
      </div>
      <div class="more flex-a" @click="changeShow" v-if="userList.length > 3">
        <text>{{ !show ? '查看更多' : '收起' }}</text>
        <img :class="show ? 'active' : ''" src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV4Cp4.png" alt="">
      </div>
    </div>
    <div class="share">
      <nut-button type="info" block openType='share'>点击分享领积分</nut-button>
    </div>
    <nut-popup :style="{ padding: '10px 20px' }" round v-model:visible="showBasic">
      <div class="pop">
        <div class="invite flex-a">
          <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPVy5nO.png" alt="">
          <text>活动规则</text>
          <img src="https://cxj.szzkba.cn/up/uploadPath/icon/pPV6FCn.png" alt="">
        </div>
        <div class="content">
          <div>
            1、小程序用户可以从‘邀请有礼’活动页面发起好友邀请，好友通过该小程序链接登录并注册成功，邀请发起者可以得到积分奖励，积分可以在积分商城兑换精美礼品。（好友为新用户，未在小程序注册过）。
          </div>
          <div>2、每邀请一位新用户奖励20积分奖励，无上限。</div>
          <div>3、同一ID、同一设备、同一手机号视为同一用户。若使用非正常手段邀请好友，则不发放积分奖励。</div>
          <div>4. 最终活动解释权归贝安数智所有。</div>
        </div>
      </div>
    </nut-popup>
  </view>
</template>

<script>
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getActUserInfo, getActRecharge, getGoodsForRecList, getUserRecharge } from '../../../api/index'

export default {
  name: 'invite',
  components: {

  },
  setup() {
    const data = reactive({
      show: false,
      showBasic: false,
      inviteList: [],
      point: {},
      list: [],
      pageNumber: 1,
      pageSize: 10,
      userList: [],
      currentIndex: 0
    });

    onMounted(() => {
      const router = useRouter();
      if (router.params.userId) {
        Taro.setStorage({
          key: "userId",
          data: router.params.userId
        })
      }
      getActUserInfo().then(res => {
        if (res.resultCode == 200) {
          data.inviteList = res.data
        }
      })
      getActRecharge().then(res => {
        if (res.resultCode == 200) {
          data.point = res.data
        }
      })
      getUserRecharge().then(res => {
        if (res.resultCode == 200) {
          data.userList = res.data
        }
      })
      getList()
    });
    const getList = () => {
      getGoodsForRecList({
        pageNumber: data.pageNumber,
        pageSize: data.pageSize,
      }).then(res => {
        if (res.resultCode == 200) {
          data.list = res.data.list
        }
      })
    }
    const changeShow = () => {
      data.show = !data.show
    }
    const rulesShow = () => {
      data.showBasic = true
    }
    const jumpTo = () => {
      Taro.navigateTo({ url: '/pages/changeIntegral/index' });
    }
    useShareAppMessage((res) => {
      var user = Taro.getStorageSync('user')
      if (res.from === 'button') {
        // 来自页面内转发按钮
        //console.log(res.target)
      }
      return {
        title: '邀请有礼享积分',
        path: '/pages/index/index?userId=' + user.userId,
      }
    })
    const swierChange = (e) => {
      data.currentIndex = e.detail.current
    }
    return {
      ...toRefs(data), changeShow, rulesShow, jumpTo, getList, swierChange
    }
  }
}
</script>
<style lang="scss">
.invite-box {
  background: #FAFAFF;
  position: relative;
  padding-bottom: 30rpx;

  .head {
    position: relative;
    height: 900rpx;

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .title {
      text-align: center;
      color: #fff;
      font-size: 32rpx;
      padding-top: 100rpx;
      position: relative;
      font-weight: bold;
      z-index: 2;
    }

    .reward {
      text-align: center;
      color: #fff;
      font-size: 100rpx;
      padding-top: 10rpx;
      font-weight: bold;
      position: relative;
      z-index: 2;
    }

    .change {
      text-align: center;
      font-weight: bold;
      color: #fff;
      font-size: 30rpx;
      padding-top: 20rpx;
      position: relative;
      z-index: 2;
    }

    .rules {
      width: 180rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 40rpx 0 0 40rpx;
      color: #fff;
      font-size: 30rpx;
      background: #7878FF;
      position: absolute;
      right: 0;
      top: 20rpx;
      z-index: 9;
    }
  }

  .list {
    background: #fff;
    border-radius: 20rpx;
    width: 96%;
    margin: -380rpx auto 0;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    height: 340rpx;
    text-align: center;
    position: relative;
    z-index: 1;

    .invite {
      padding: 0 140rpx;
      white-space: nowrap;
      height: 50rpx;

      img {
        width: 200rpx;
        height: 40rpx;
      }

      text {
        padding: 0 30rpx;
        font-size: 30rpx;
      }
    }

    .slide-image {
      border-radius: 15rpx;
      margin-right: 20rpx;
      background: #fff;
      box-sizing: border-box;

      .slide-head {
        height: 160rpx;
        text-align: center;

        image {
          width: 160rpx;
          height: 160rpx;
          margin: 0 auto;
          border-radius: 50%;
        }
      }

      .slide-foot {
        div {
          box-sizing: border-box;
          // color: #F25C26;
          font-size: 28rpx;
        }

        div:first-child {
          width: 140rpx;
          margin: 0 auto;
          overflow: hidden;
          white-space: nowrap;
        }

        div:last-child {
          font-size: 26rpx;
        }

        img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    swiper {
      height: 300rpx;
      width: 100%;
      margin-top: 20rpx;

      .swiperItem {
        width: 200rpx !important;
      }
    }

    .active {
      width: 100%;
      transition: all 0.2s ease-in 0s;

      .slide-head {
        text-align: center;
      }
    }

    // img {
    //   width: 100rpx;
    //   height: 100rpx;
    //   border-radius: 100%;
    // }
  }

  .step {
    width: 96%;
    margin: 10rpx auto 0;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx 0 10rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 1;

    .invite {
      padding: 0 140rpx;
      white-space: nowrap;

      img {
        width: 200rpx;
        height: 40rpx;
      }

      text {
        padding: 0 30rpx;
        font-size: 30rpx;
      }
    }
  }

  .flow {
    padding: 20rpx 80rpx;
    box-sizing: border-box;

    img {
      width: 100rpx;
      height: 100rpx;
    }

    img:nth-child(2),
    img:nth-child(4) {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .tips {
    padding: 0 80rpx 20rpx;
    font-size: 26rpx;

    div {
      line-height: 34rpx;
      text-align: center;
    }
  }

  .log {
    width: 96%;
    margin: 10rpx auto 0;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx 0;

    .invite {
      padding: 0 110rpx;
      white-space: nowrap;

      img {
        width: 200rpx;
        height: 40rpx;
      }

      text {
        padding: 0 30rpx;
        font-size: 30rpx;
      }
    }

    .exchange {
      width: 90%;
      margin: 30rpx auto 0;
      background: linear-gradient(to right, #6C6CFF, #8B74FF, #A979FF);
      border-radius: 10rpx;
      padding: 20rpx;
      color: #fff;

      img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      .name {
        font-size: 30rpx;
        color: #DFDFFF;
        margin-bottom: 5rpx;
      }

      .num {
        font-size: 34rpx;
      }

      .left {
        width: 200rpx;
      }

      .middle {
        width: 300rpx;
      }

      .btn {
        width: 190rpx;
        height: 70rpx;
        border-radius: 50rpx;
        text-align: center;
        line-height: 70rpx;
        color: #844AD7;
        font-size: 34rpx;
        background: #fff;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .users {
      padding-top: 40rpx;
      height: 380rpx;
      overflow: hidden;
      transition: all 0.5s;

      .item {
        margin-bottom: 30rpx;
        color: #9D9DB9;
        font-size: 30rpx;
        white-space: nowrap;

        .name {
          width: 350rpx;
        }

        .integral {
          font-size: 28rpx;
        }

        img {
          margin: 0 20rpx 0 40rpx;
          float: left;
          width: 70rpx;
          height: 70rpx;
        }
      }
    }

    .users.active {
      height: 1000rpx;
      overflow-y: auto;
    }

    .noData {
      text-align: center;
      font-size: 28rpx;
      color: #999;

      .nut-empty {
        padding: 0;
      }
    }
  }

  .more {
    background: #F2F2FD;
    color: #565177;
    width: 240rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
    border-radius: 70rpx;
    font-size: 28rpx;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 0 20rpx;
    margin: 20rpx auto;

    img {
      transition: all 0.5s;
      width: 30rpx;
      height: 15rpx;
    }

    img.active {
      transform: rotate(180deg);
    }
  }

  .share {
    text-align: center;

    button {
      width: 80%;
      margin: 0 auto;
    }
  }

  .pop {
    .invite {
      white-space: nowrap;
      padding: 20rpx 0;

      img {
        width: 220rpx;
        height: 40rpx;
      }

      text {
        padding: 0 30rpx;
        font-size: 30rpx;
        color: #565177;
      }
    }

    .content {
      color: #9D9DB9;
      font-size: 24rpx;
      text-align: justify;
    }
  }
}
</style>
